« Previous Next »

JavaScript Events - Classic Examples

Click Event


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <button class="btn btn-primary mb-2" onclick="handleClickEvent()">Click Me</button>
        <div id="clickOutput" class="output-box">Click the button to trigger an event.</div>
    </div>
    <Script>
        function handleClickEvent() {
            document.getElementById('clickOutput').innerText = 'Button was clicked!';
        }
    </Script>
</body>
</html>
Click the button to trigger an event.

Mouse Over Event


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <p id="mouseOverText" class="output-box" onmouseover="handleMouseOver()">Hover over this text.</p>
        <div id="mouseOverOutput" class="output-box">Hover over the text to trigger the event.</div>
    </div>
    <Script>             
    function handleMouseOver() {
        document.getElementById('mouseOverOutput').innerText = 'Mouse is over the text!';
    }
    </Script>
</body>
</html>

Hover over this text.

Hover over the text to trigger the event.

Key Press Event


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <input type="text" class="form-control mb-2" onkeypress="handleKeyPress(event)" placeholder="Type something...">
        <div id="keyPressOutput" class="output-box">Type in the input field to trigger a key press event.</div>
    </div>
    <Script>
        function handleKeyPress(event) {
            var key = event.key;
            document.getElementById('keyPressOutput').innerText = 'Key pressed: ' + key;
        }
    </Script>
</body>
</html>
Type in the input field to trigger a key press event.

Change Event


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <select class="form-select mb-2" onchange="handleChange(event)">
            <option value="">Select an option</option>
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
            <option value="Option 3">Option 3</option>
        </select>
        <div id="changeOutput" class="output-box">Select an option to trigger the change event.</div>
    </div>
    <Script>
        function handleChange(event) {
            var selectedValue = event.target.value;
            document.getElementById('changeOutput').innerText = 'Selected option: ' + selectedValue;
        }
    </Script>
</body>
</html>
Select an option to trigger the change event.

Double Click Event



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <button ondblclick="handleDoubleClick()">Double Click Me</button>
        <div id="doubleClickOutput" class="output-box">Double-click the button to trigger the event.</div>
    </div>
    <Script>
        function handleDoubleClick() {
            document.getElementById('doubleClickOutput').innerText = 'Button was double-clicked!';
        }
    </Script>
</body>
</html>
Double-click the button to trigger the event.

Form Submit Event


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    <div>
        <form onsubmit="handleSubmit(event)">
            <div class="mb-3">
                <label for="nameInput" class="form-label">Name:</label>
                <input type="text" class="form-control" id="nameInput" placeholder="Enter your name">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <div id="formOutput" class="output-box">Submit the form to trigger the submit event.</div>
    </div>
    <Script>
        function handleSubmit(event) {
            event.preventDefault();
            var name = document.getElementById('nameInput').value;
            document.getElementById('formOutput').innerText = 'Form submitted! Name: ' + name;
        }
    </Script>
</body>
</html>
Submit the form to trigger the submit event.
« Previous Next »